<script lang="ts" setup>
import {ShoppingCart} from "@element-plus/icons-vue";
const login=useLoginStore();
const isCollapse = ref(false)
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>
<template>
  <div class="my-page-content">
    <HeaderTop />
    <div class="grid bg-[#f0f2f5] w-full" :class="[isCollapse?'grid-cols-[64px_1fr]':'grid-cols-[200px_1fr]']">
      <div>
        <el-menu
            default-active="1"
            class="el-menu-vertical-demo"
            background-color="#545c64"
            text-color="var(--el-color-white)"
            :collapse="isCollapse"
            @open="handleOpen"
            @close="handleClose"
            unique-opened
        >
          <template v-if="login.navs.length">
            <el-sub-menu :index="`${ind+1}`" v-for="(item,ind) in login.navs">
                <template #title><el-icon><component :is="item.icon" /></el-icon><span>{{ item.label }}</span></template>
                <el-menu-item :index="`${ind+1}-${subInd+1}`" v-for="(sub,subInd) in item.children"><NuxtLink :to="item.path+sub.path">{{ sub.label }}</NuxtLink></el-menu-item>
            </el-sub-menu>
          </template>

        </el-menu>
        <div class="trapezoid text-sm" @click="isCollapse=!isCollapse" :style="{left:isCollapse?'64px':'200px'}">
          {{isCollapse?'展开':'折叠'}}
        </div>
      </div>
      <div class="px-6 py-[2_4]">
        <MyNavTages class="h-[30px]"></MyNavTages>
        <div class="overflow-y-auto" :style="{height:'calc(100vh - 150px)'}">
            <slot></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.trapezoid {
  color: var(--el-color-white);
  position: absolute;
  width: 20px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  top:calc((100vh - 91px)/2);
  transition: left 300ms ease-in-out;
  &:after{
    width: 20px; /* 设置容器宽度 */
    height: 50px; /* 设置容器高度 */
    background-color: #545c64; /* 设置容器颜色 */
    position: absolute;
    content: '';
    left: 0;
    top:0;
    transform:perspective(10px) rotateY(12deg) ;
    z-index:-1;
  }
}
.menu-box{
  display: flex;
  align-items: center;

}
.el-menu-vertical-demo{
  height:calc(100vh - 91px);
  overflow: auto;
  position: relative;
  border-right-width:0;
  &:not(.el-menu--collapse) {
    width: 200px;
  }
}
.my-page-content{
  height: 100vh;
}
</style>
